<template>
    <div class="rate2-wapper" >
        <slot></slot>
        <div class="rate" :style="fontStyle" @mouseout="mouseOut">
            <span @mouseover="mouseOver(num)" v-for="num in 5" :key="num">☆</span>
            <span class="hollow" :style="fontWidth">
                <span @click="onRate(num)"  @mouseover="mouseOver(num)"  v-for="num in 5" :key="num">★</span>
            </span>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
interface Props {
    value: number
    theme: string
}
let props = withDefaults(defineProps<Props>(), {
    theme: 'red'
})
let emits = defineEmits(['update:value'])
const themeObj = {
    'red': '#f5222d',
    'orange': '#fa541c',
    'yellow': '#fadb14',
    'green': '#73d13d',
    'blue': '#40a9ff',
}
const fontStyle = computed(() => `color:${themeObj[props.theme]}`)
const width = ref(props.value)
const mouseOver = (v)=> {
    width.value = v
}
const mouseOut = (v)=> {
    width.value = props.value
}
const onRate = (v) => {
    console.log('onRate==', v)
    emits('update:value', v)
}
const fontWidth = computed(() => `width:${width.value}em`)
</script>
<style scoped>
.rate2-wapper {
    display: inline-block;
}
.rate {
    position: relative;
    display: inline-block;
}
.rate .hollow {
    position: absolute;
    display:inline-block;
    top:0;
    left:0;
    width:0;
    overflow:hidden;
}
</style>